---
type: tutorial
title: Créez-le par vous-même - En-tête
description: >-
  Tutoriel : Créer votre premier blog avec Astro —

  Utilisez tout ce que vous avez appris jusqu'à présent pour créer un en-tête
  avec une navigation réactive.
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Étant donné que votre site sera consulté sur différents appareils, il est temps de créer une navigation de page capable de répondre à plusieurs tailles d'écran !

<PreCheck>
  - Créer un en-tête pour votre site contenant le composant Navigation
  - Rendre le composant de navigation réactif
</PreCheck>


<Box icon="puzzle-piece">

## Essayer par vous-même - Créer un nouveau composant Header

<Steps>
1. Créez un nouveau composant Header. Importez et utilisez votre composant `Navigation.astro` existant à l'intérieur d'un élément `<nav>` qui se trouve à l'intérieur d'un élément `<header>`.

    <details>
    <summary>Montrez-moi le code !</summary>

    Créez un fichier nommé `Header.astro` dans `src/components/`
    ```astro title="src/components/Header.astro"
    ---
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Navigation />
      </nav>
    </header>
    ```

    </details>
</Steps>

</Box>

<Box icon="puzzle-piece">

## Essayer par vous-même - Mettre à jour vos pages

<Steps>
1. Sur chaque page, remplacez votre composant `<Navigation/>` existant par votre nouvel en-tête.

    <details>
    <summary>Montrez-moi le code !</summary>

    ```astro title="src/pages/index.astro" ins={3,18} del={2,17}
    ---
    import Navigation from '../components/Navigation.astro';
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Page d'accueil";
    ---
    <html lang="fr">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
      </head>
      <body>
        <Navigation />
        <Header />
        <h1>{pageTitle}</h1>
        <Footer />
      </body>
    </html>
    ```
    </details>

2. Consultez l'aperçu de votre navigateur et vérifiez que votre en-tête est affiché sur chaque page. Il ne sera pas encore différent, mais si vous inspectez votre aperçu à l'aide des outils de développement, vous verrez maintenant des éléments tels que `<header>` et `<nav>` autour de vos liens de navigation.
</Steps>
</Box>

## Ajouter des styles réactifs

<Steps>
1. Mettez à jour `Navigation.astro` avec la classe CSS pour contrôler vos liens de navigation. Enveloppez les liens de navigation existants dans une balise `<div>` avec la classe `nav-links` et l'attribut id défini sur `main-menu`.

    ```astro title="src/components/Navigation.astro" ins={3,7}
    ---
    ---
    <div id="main-menu" class="nav-links">
      <a href="/">Accueil</a>
      <a href="/about/">À propos</a>
      <a href="/blog/">Blog</a>
    </div>
    ```

2. Copiez les styles CSS ci-dessous dans `global.css`. Ces styles :

    - Mettent en forme et positionnent les liens de navigation pour les appareils mobiles
    - Utilisent une requête `@media` pour définir des styles différents pour des tailles d'écran plus grandes

    :::tip[Conception Mobile-First]
    Commencez par définir ce qui doit se passer sur les petits écrans en premier ! Les écrans plus petits nécessitent des mises en page plus simples. Ensuite, ajustez vos styles pour les appareils plus grands. Si vous concevez d'abord le cas compliqué, vous devrez ensuite essayer de le rendre à nouveau simple.
    :::

    ```css title="src/styles/global.css" ins={23-60}
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }

    /* Styles de la navigation */

    .nav-links {
      width: 100%;
      display: none;
      margin: 0;
    }

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
      color: #0d0950;
    }

    .nav-links a:hover,
    .nav-links a:focus {
      background-color: #ff9776;
    }

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }
    }
    ```
</Steps>

Redimensionnez votre fenêtre et recherchez les styles différents appliqués à différentes largeurs d'écran. Votre en-tête est maintenant **réactif** à la taille de l'écran grâce à l'utilisation des requêtes `@media`.

<Box icon="check-list">

## Liste de contrôle

<Checklist>
- [ ] Je peux utiliser du CSS pour ajouter des éléments réactifs à mon site.
</Checklist>
</Box>

### Ressources

- [Conception basée sur les composants](https://www.droptica.com/blog/component-based-design/) (Anglais) <Badge class="neutral-badge" text="external" />

- [Balises HTML sémantiques](https://www.dofactory.com/html/semantics) (Anglais) <Badge class="neutral-badge" text="external" />

- [Conception mobile-first](https://www.mobileapps.com/blog/mobile-first-design) (Anglais) <Badge class="neutral-badge" text="external" />
